<template>
  <!-- 轮播图预览 -->
  <div class="photo-wrap J_photo_wrap">
    <div class="photo-box" @click="handleImgChange">
      <img :src="imgUrl" alt="预览图" />
    </div>
  </div>
</template>>

<script>
export default {
  props: {
    imgUrl: {
      type: String,
    },
  },
  data() {
    return {};
  },
  mounted() {
    this.bindEvent();
    console.log(this.imgUrl);
  },
  methods: {
    //添加监听
    bindEvent() {
      var _this = this;
      $(".photo-wrap").click(function () {
        $(".photo-wrap").removeClass("active");
      });
    },
    handleImgChange(e) {
      if (e.stopPropagation) {
        e.stopPropagation();
      } else {
        e.cancelBubble = true;
      }
      this.$emit("imgChange");
    },
  },
};

// 父级函数
// 修改图片
// 父级data添加 curImgUrl
// 父级预览函数
// 按钮 父级click绑定
// 按钮 图片链接需要更改

// data部分
// curImgUrl: "",

//事件
// handleViewPhoto
// imgChange

// //预览图片
// handleViewPhoto(e) {
//   const url = e.currentTarget.dataset.url;
//   this.curImgUrl = url;
//   $(".photo-wrap").addClass("active");
// },

//  <div @click="handleViewPhoto"
//  :data-url="scope.row.imgUrl">
//                 <img
//                   class="table-img"
//                   style="width: 100px; height: 61.8px;"
//                   :src="scope.row.imgUrl"
//                   alt="图片"
//                 />
//               </div>
</script>

<style lang="scss" scoped>
.photo-wrap {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35);
  z-index: 100;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  overflow: hidden;

  &.active {
    display: flex;
    transition: all 0.3s ease-in-out;
  }
  .photo-box {
    height: 500px;
    margin-top: -30px;

    img {
      display: block;
      height: 100%;
    }
  }
}
</style>